import {LitElement, html, css} from 'lit';
import {customElement} from 'lit/decorators.js';

// import "./index.css"

import "@layout/home/main-layout.ts"

@customElement('app-entry')
export class AppEntry extends LitElement {
  static styles = css`
      :host {
          padding: 0;
          width: 100vw;
          height: 100vh;
          font-family: Arial, sans-serif;
          background-color: white;
      }
  `;

  render() {
    return html`
      <main-layout/>
<!--      <div class="header">Quickly Tabs 快速导航</div>-->
<!--      <div class="body">-->
<!--        <div class="content">-->
<!--          <div class="gap" style="padding-top: 60px; width: 1px;"></div>-->
<!--          <div class="card-group">-->
<!--            <link-card title="Google" url="https://www.google.com"></link-card>-->
<!--            <link-card title="Bing" url="https://www.bing.com"></link-card>-->
<!--            <link-card title="GitHub" url="https://github.com"></link-card>-->
<!--            <link-card title="Stack Overflow" url="https://stackoverflow.com"></link-card>-->
<!--          </div>-->
<!--          <div class="card-group">-->
<!--            <link-card title="YouTube" url="https://www.youtube.com"></link-card>-->
<!--            <link-card title="Bilibili" url="https://www.bilibili.com"></link-card>-->
<!--          </div>-->

<!--          <nav>-->
<!--            <a href="/">Home</a>-->
<!--            <a href="/favorite/ai">AI</a>-->
<!--            <a href="/favorite/music">Music</a>-->
<!--          </nav>-->
<!--          <router-host/>-->
<!--        </div>-->
<!--      </div>-->
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'app-entry': AppEntry
  }
}
